/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";

// Mixins specific to the CDAP theme
@import "../../styles/themes/cdap/mixins.less";
@import "cdap/header.less";
@import "cdap/buttons.less";
@import "cdap/theme.less";
@import "cdap/tabs.less";

body.theme-cdap {
  visibility: visible;

  main.container {
    @cdap-tabs-height: 20px;
    @cdap-tabs-hpad: extract(@nav-link-padding, 1);
    @cdap-subnav-height: 300px;

    blockquote { border: 0; }

    h1 {
      color: #5F6674;
      font-size: 30px;
      font-weight: 400;
    }

    h2 {
      color: #5F6674;
      font-size: 20px;
      font-weight: 300;
      > span {
        display: block;
        margin-bottom: 8px;
      }
    }

    h3 {
      color: #5f6673;
      font-size: 18px;
      font-weight: 300;
    }

    h4 {
      color: #5F6674;
      font-size: 16px;
      font-weight: 300;
    }

    section.tab-pane h2 {
      margin: 0;
      font-weight: 400px;
      font-size: 20px;
    }

    /* we need to be able to calc tab height
        for .cdap-subnav-end to work */
    .nav-tabs > li > a {
      line-height: @cdap-tabs-height;
    }

    // TODO: Remove once all program layouts completed
    .cdap-subnav-end {
      content: ' ';
      background-color: white;
      position: absolute;
      z-index: -1;
      right: 0;
      width: 100%;
      height: @cdap-subnav-height;
      margin-top: -(@cdap-subnav-height - (@cdap-tabs-height + (@cdap-tabs-hpad*2) + 2));
      border-bottom: 1px solid @nav-tabs-border-color;
      &.immediate { margin-top: -(@cdap-subnav-height); }
    }

    .type-block {
      padding-bottom: 5px;
      h2, [class*="icon-"] {
        font-size: 21px;
      }
      h2 {
        margin: 0;
      }
      [class*="icon-"] {
        color: @brand-primary;
        margin-right: 5px;
        vertical-align: middle;
      }
      + p {
        color: @program-text;
        font-size: 14px;
        margin-bottom: 0;
      }
    }
    // Make all custom icons outside of class="type-block" a little bit bigger
    [class*="icon-"] {
      font-size: 15px;
    }

    //
    // Program styling
    // --------------------------------------------------

    // Wrapper for program level, run level, and tabs level
    div.levels {
      background-color: @table-bg;
      color: @program-text;
    }
    div.button-bar {
      @media (max-width: @screen-xs-max) {
        display: none;
      }
      my-start-stop-button > .btn-group, > .btn-group {
        .box-shadow(0 1px 2px 0 rgba(0,0,0,.2));
        @media (max-width: @screen-xs-max) {
          display: block;
          margin-top: 20px;
        }
        .btn-default {
          .border-radius(0);
          padding-right: 0;
          padding-left: 0;
          width: 100px;
          &.dropdown-toggle {
            .dropdown-defaults(@text-align: center);
          }
          > span {
            display: block;
            &:last-child {
              font-size: 12px;
              margin-top: 5px;
            }
          }
        }
        ul.dropdown-menu {
          min-width: 0;
        }
      }
      .btn-default {
        &.dropdown-toggle {
          background-color: white;
          border: 1px solid #dfe2e9;
          color: @btn-default-color;
        }
        &[disabled] {
          border-right-color: #b5bccc;
        }
      }
      > .btn-group {
        margin-left: -5px;
        &.open {
          .dropdown-toggle {
            background-color: #e0e0e0;
          }
        }
      }
    }
    div.run-level {
      @media (min-width: @screen-md-min) {
        border-top: 1px solid @table-border-color;
        border-bottom: 1px solid @table-border-color;
      }
      .run-level-inner {
        .flexbox();
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        @media (min-width: @screen-md-min) {
          border-right: 1px solid @table-border-color;
        }
      }
      // Run ID dropdown
      .dropdown {
        border-right: 1px solid @table-border-color;
        border-left: 1px solid @table-border-color;
        width: 335px;
        @media (max-width: @screen-sm-max) {
          border-top: 1px solid @table-border-color;
        }
        height: 60px;
        .order(1);
        span {
          &.fa-circle, &.fa-caret-down {
            line-height: 48px;
            vertical-align: top;
          }
          &.runid-text {
            padding: 0 15px;
            vertical-align: middle;
            span {
              display: block;
              &:first-child {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                width: 255px;
              }
              &:last-child {
                color: @program-text;
              }
            }
          }
        }
        .dropdown-toggle {
          .cask-btn(@background: transparent, @border: 0, @border-radius: 0, @color: @btn-default-color,  @font-size: 14px, @padding: 0 15px);
          display: table;
          height: 100%;
          &:active {
            .box-shadow(none);
          }
          > span {
            display: table-cell;
            font-weight: bold;

          }
        }
        .dropdown-menu {
          width: 100%;
          li {
            height: 60px;
            a {
              background-color: @table-bg;
              color: @btn-default-color;
              font-weight: bold;
              padding: 0 15px;
              display: table;
              white-space: nowrap;
              height: 100%;
              width: 100%;
              &:hover, &:focus {
                background-color: @subnav-border;
                color: @btn-default-color;
              }
              > span {
                display: table-cell;
              }
            }
          }
        }
      }
      div.stop-run {
        .order(3);
        @media (max-width: @screen-xs-max) {
          display: none;
        }
        @media (min-width: @screen-sm-min) {
          margin-left: auto;
        }
        > div {
          display: inline-block;
          > .btn {
            .cask-btn(@background: white, @border: 1px solid white, @border-radius: 0, @color: @btn-default-color, @font-size: 12px, @padding: 0);
            border-left-color: @table-border-color;
            width: 100px;
            @media (max-width: @screen-sm-max) {
              border-color: @table-border-color;
            }
            @media (max-width: @screen-md-max) {
              width: 60px;
            }
            height: 60px;
            line-height: 60px;
            .transition(all 0.2s ease);
            &.btn-pause {
              margin-left: -4px;
            }
            &:hover {
              background-color: #e0e0e0;
              border-top-color: #e0e0e0;
              border-bottom-color: #e0e0e0;
            }
            > span span {
              display: block;
              &.fa-stop {
                margin-bottom: 3px;
              }
            }
          }
        }
      }
    }
    div.tabs-level {
      border-bottom: 1px solid @table-border-color;
      margin-top: 25px;
      ul.slanted-tabs {
        border-bottom: 0; // TODO: remove set border bottom for all slanted tabs
        > li.active > a:hover {
          border-right: 1px solid transparent;
        }
      }
    }
    div.tab-view {
      margin-top: 20px;
    }
  } // end main

  #loading-bar {
    .bar {
      height: 5px;
    }
  }

  footer {
    background-color: white;
    font-size: 11px;
    font-weight: 600;
    z-index: 0;
    span.cask-logo {
      background: url('@{img-path}/cdap_sprite.png') -360px 0 no-repeat;
      display: inline-block;
      height: 30px;
      width: 26px;
      vertical-align: top;
    }
  }
}
